<!DOCTYPE html>
<html lang="zh">

<head>
  <title>Kuai So</title>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <style id="backgroundStyle">
    body {
      background-color: #E8F3FB;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="logo">
      <img src="https://kuiwaiwai.gitee.io/front-end-sample/resources/square-test-1.jpg">
    </div>
    <div class="search-box">
      <select id="searchEngine" onchange="changeSearchEngine()">
        <option value="https://www.baidu.com/s?wd=">百度</option>
        <option value="https://www.bing.com/search?q=">必应</option>
        <option value="https://www.google.com/search?q=">谷歌</option>
        <option value="https://kaifa.baidu.com/searchPage?wd=">开发者</option>
      </select>
      <input type="text" id="searchInput" placeholder="在这里输入搜索关键词" onkeydown="handleKeyDown(event)">
      <button class="search-box" onclick="search()">搜索</button>
    </div>
  </div>
  <div class="hitokoto">
    <p class="hitokoto_text">句子获取中...</p>
  </div>
  <footer>
    <p>版权所有 &copy; 2023 快搜起始页</p>
  </footer>

  <button class="settings-button" onclick="openSettingsModal()">设置</button>

  <div id="settingsModal" class="modal">
    <div class="modal-content">
      <span class="close" onclick="closeSettingsModal()">&times;</span>
      <h2>设置</h2>
      <h3>背景设置</h3>
      <select id="backgroundSelect" onchange="changeBackground(this.value)">
        <option value="净空白">净空白</option>
        <option value="初云蓝">初云蓝</option>
        <option value="晚云彩">晚云彩</option>
        <option value="松间绿">松间绿</option>
      </select>
    </div>
  </div>

  <script>
    function search() {
      var searchInput = document.getElementById("searchInput");
      var searchEngine = document.getElementById("searchEngine").value;
      var searchQuery = searchInput.value.trim();

      if (searchQuery !== "") {
        var searchUrl = searchEngine + encodeURIComponent(searchQuery);
        window.open(searchUrl, "_blank");
      }
    }

    function changeSearchEngine() {
      var searchInput = document.getElementById("searchInput");
      searchInput.focus();
    }

    function handleKeyDown(event) {
      if (event.keyCode === 13) {
        search();
      }
    }

    function openSettingsModal() {
      var modal = document.getElementById("settingsModal");
      modal.style.display = "block";
    }

    function closeSettingsModal() {
      var modal = document.getElementById("settingsModal");
      modal.style.display = "none";
    }
  </script>

  <script>
    function changeBackground(background) {
      var backgroundStyle = document.getElementById("backgroundStyle");
      switch (background) {
        case "净空白":
          backgroundStyle.innerHTML = "body { background-color: #E8F3FB; }";
          break;
        case "初云蓝":
          backgroundStyle.innerHTML = "body { background: linear-gradient(to bottom, #3498db, #ffffff); background-size: 100% 100vh; background-repeat: no-repeat; }";
          break;
        case "晚云彩":
          backgroundStyle.innerHTML = "body { background: linear-gradient(to bottom, #ff5f6d, #ffc371); background-size: 100% 100vh; background-repeat: no-repeat; }";
          break;
        case "松间绿":
          backgroundStyle.innerHTML = "body { background: linear-gradient(to top, #1B470C, #245610, #4c8a31, #65A745); background-size: 100% 100vh; background-repeat: no-repeat; } .hitokoto { color: #B1D4A0; }";
          break;
        default:
          break;
      }
    }

    function saveBackgroundSetting(background) {
      localStorage.setItem("backgroundSetting", background);
    }

    function loadBackgroundSetting() {
      var backgroundSetting = localStorage.getItem("backgroundSetting");
      if (backgroundSetting) {
        changeBackground(backgroundSetting);
        document.getElementById("backgroundSelect").value = backgroundSetting;
      }
    }

    window.addEventListener("DOMContentLoaded", function () {
      loadBackgroundSetting();
    });

    window.addEventListener("beforeunload", function () {
      var backgroundSetting = document.getElementById("backgroundSelect").value;
      saveBackgroundSetting(backgroundSetting);
    });
  </script>

  <script>
    fetch('https://v1.hitokoto.cn?c=i')
      .then(response => response.json())
      .then(data => {
        const hitokoto = document.querySelector('.hitokoto_text')
        hitokoto.innerText = "【" + data.hitokoto + "】" || "我寄愁心与明月，随风直到夜郎西"
      })
      .catch(console.error)
  </script>

</body>

</html>